<template>
  <div id="main">
    <div id="left">
      <div id="china-left-top">
        <ChinaHistogram></ChinaHistogram>
      </div>

      <div id="china-left-bottom">
        <Nightingale></Nightingale>
      </div>

    </div>


    <div id="china-center">

      <div id="header">
        <ActionFront></ActionFront>
      </div>

      <div id="navigation">
        <ul id="ul">
          <li class="li"><router-link to="/" class="a-li">亚运会</router-link></li>
          <li class="li"><router-link to="/china" class="a-li">中国亚运会</router-link></li>
        </ul>
      </div>
      <div id="countdown" style="color: #2aabd2;text-align: center;margin: 0 auto "><Countdown></Countdown></div>

      <div id="china-map">
        <ChinaMap></ChinaMap>
      </div>
      <div id="china-center-bottom">
        <ChinaLineChart></ChinaLineChart>
      </div>

    </div>


    <div id="right">

      <div id="china-right-top">
        <HeatChart></HeatChart>
      </div>

      <div id="china-right-bottom">
        <PieLine></PieLine>

      </div>

    </div>

  </div>
</template>

<script>
import ChinaLineChart from "@/components/china/ChinaLineChart";
import ChinaHistogram from "@/components/china/ChinaHistogram";
import HeatChart from "@/components/china/HeatChart";
import Nightingale from "@/components/china/Nightingale";
import PieLine from "@/components/china/PieLine";
import ActionFront from "@/components/world/ActionFront";
import Countdown from "@/components/china/countdown";
import ChinaMap from "@/components/china/chinaMap";
export default {
  name: "china",
  components:{ChinaMap,ChinaLineChart,ChinaHistogram,HeatChart,Nightingale,PieLine,ActionFront,Countdown}
}

</script>

<style scoped>
@import '../assets/css/index.css';
</style>
